<script setup lang="ts">
import {defineAsyncComponent, onMounted, ref} from 'vue'
import { useStore } from 'vuex'
import {ElNotification} from "element-plus";

// 延迟加载
const Footer = defineAsyncComponent(() => import('./components/layout/Footer.vue'))
const TopNavBar = defineAsyncComponent(() => import('./components/layout/TopNavBar.vue'))
const FloatingTools = defineAsyncComponent(() => import('./components/common/FloatingTools.vue'))
const NotificationBar = defineAsyncComponent(() => import('./components/common/NotificationBar.vue'))

const store = useStore()
const isLoading = ref(true);

onMounted(async () => {
  try {
    // 优先从 store 获取网站信息
    if (!store.getters.isWebsiteLoaded) {
      await store.dispatch('fetchWebsite')
    }
  } catch (error) {
    console.error('Failed to load website info:', error)
    ElNotification({
      title: '加载失败',
      message: "网站信息加载失败，请刷新重试",
      type: 'error',
      duration: 5000
    })
  } finally {
    isLoading.value = false;
  }
})
</script>

<template>
  <div class="app">
    <div v-if="isLoading" class="loading-container">
      <div class="loading-spinner"></div>
      <p class="loading-text">加载中...</p>
    </div>

    <div v-else class="app-content">
      <TopNavBar />
      <main class="main-content">
        <NotificationBar />
        <router-view />
      </main>
      <Footer />
      
      <!-- 全局悬浮工具 -->
      <FloatingTools />
    </div>
  </div>
</template>

<style lang="scss">
@import '@/assets/styles/variables.scss';
@import '@/assets/styles/mixins.scss';

// 字体定义
@font-face {
  font-family: 'CustomFont';
  src: url('./assets/iconfont/2.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.app {
  min-height: 100vh;
  @include gradient-page;
  transition: var(--transition-normal);
}

.loading-container {
  @include center-flex;
  flex-direction: column;
  height: 100vh;
  gap: var(--space-lg);
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border-color);
  border-top: 4px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.app-content {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  min-height: calc(100vh - var(--navbar-height));
  padding-top: var(--navbar-height); // 只为固定导航栏留出空间
  padding-left: 20px;
  padding-right: 20px;
  transition: padding-top 0.5s ease; // 添加平滑过渡
}

// 暗黑模式平滑过渡
[data-theme="dark"] .app {
  @include gradient-page;
}

// 全局 Element Plus 样式覆盖
.el-notification {
  backdrop-filter: blur(10px);
  border-radius: var(--border-radius-md) !important;

  &.el-notification--success {
    background: rgba(103, 194, 58, 0.9) !important;
  }

  &.el-notification--error {
    background: rgba(245, 108, 108, 0.9) !important;
  }

  &.el-notification--warning {
    background: rgba(230, 162, 60, 0.9) !important;
  }

  &.el-notification--info {
    background: rgba(144, 147, 153, 0.9) !important;
  }
}

.el-message {
  backdrop-filter: blur(10px);
  border-radius: var(--border-radius-md) !important;

  &.el-message--success {
    background: rgba(103, 194, 58, 0.9) !important;
    color: white !important;
  }

  &.el-message--error {
    background: rgba(245, 108, 108, 0.9) !important;
    color: white !important;
  }

  &.el-message--warning {
    background: rgba(230, 162, 60, 0.9) !important;
    color: white !important;
  }

  &.el-message--info {
    background: rgba(255, 255, 255, 0.9) !important;
    color: white !important;
  }
}

// 工具提示样式
.el-tooltip__popper {
  backdrop-filter: blur(10px);
  border-radius: var(--border-radius-sm) !important;
}

// 响应式调整
@include respond-below(md) {

}
</style>
